<script setup lang="ts">
import { ref, onMounted, computed } from 'vue';
import type { FirstDept } from '@/types/consult';
import { getAllDept } from '@/services/consult';
import { useConsultStore } from '@/stores/consult';

// 创建store
const consultStore = useConsultStore();

// 左侧一级导航栏选中索引
const active = ref(0);

// 诊室数据
const list = ref<FirstDept[]>([]);

// 租价加载完毕后
onMounted(async () => {
  const res = await getAllDept();
  // 设置页面数据
  list.value = res;
  console.log('======>', list.value);
});

// 根据选中1级诊室计算二级诊室数据
const subDept = computed(() => {
  // return list.value[active.value]?.child;

  if (list.value.length > 0) {
    return list.value[active.value].child;
  } else {
    return [];
  }
});
</script>

<template>
  <div class="consult-dept">
    <CpNavBar title="选择科室" />
    <div class="wrapper">
      <van-sidebar v-model="active">
        <van-sidebar-item
          v-for="item in list"
          :key="item.id"
          :title="item.name"
        />
      </van-sidebar>
      <div class="sub-dept">
        <router-link
          v-for="item in subDept"
          :key="item.id"
          to="/consult/illness"
          @click="consultStore.setDept(item.id)"
          >{{ item.name }}</router-link
        >
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.consult-dept {
  padding-top: 0px;

  .wrapper {
    height: calc(100vh - 46px);
    // overflow: hidden;
    display: flex;

    .van-sidebar {
      width: 114px;
      &-item {
        padding: 14px;
        color: var(--cp-tag);
        &--select {
          color: var(--cp-main);
          font-weight: normal;
          &::before {
            display: none;
          }
        }
      }
    }

    .sub-dept {
      // flex: 1;
      // height: 100%;
      width: 100%;
      overflow-y: auto;
      > a {
        display: block;
        padding: 14px 30px;
        color: var(--cp-dark);
      }
    }
  }
}
</style>
